import { reactive } from 'vue';

export default class Comment {
    constructor(field) {
        this.field = field
        this.state = reactive({
            commentText: '',
            commentTree: this.commentTree
        })
    }
    get commentTree() {
        return Comment.formatTree(JSON.parse(localStorage.getItem(this.field) || '[]'));
    }
    addComment = ({ id, username }) => {
        const commentInfo = {
            id: new Date().getTime(),
            pid: 0,
            uid: id,
            username,
            comment: this.state.commentText,
            createdAt: new Date().toISOString(),
        };

        this.setCommentList(commentInfo);
        this.setComment(commentInfo);

    }
    addReply = (item,replyText,{ id, username }) => {
        const replyInfo = {
            id: new Date().getTime(),
            pid:item.id,
            uid: id,
            username,
            comment: replyText,
            createdAt: new Date().toISOString(),
        };

        this.setCommentList(replyInfo);
        this.setReply(item,replyInfo);
    }
    setComment(comment){
        this.state.commentTree.unshift(comment);
        this.state.commentText = "";
    }
    setReply(item, reply){
        // if(!item.children){
        //     item.children = [];
        // }
        // item.children.unshift(reply);
        ;(item.children || (item.children = [])).unshift(reply);

    }
    setCommentList(comment) {
        const commentList = JSON.parse(localStorage.getItem(this.field) || "[]");
        commentList.unshift(comment);
        localStorage.setItem(this.field, JSON.stringify(commentList));


    }
    static formatTree(data) {
        const result = [];
        const map = {
            /**
             * 1:item,
             * 2:item
             */
        }
        data.forEach(item => {
            map[item.id] = item;
        })
        data.forEach(item => {
            const parent = map[item.pid];
            if (parent) {
                ; (parent.children || (parent.children = [])).unshift(item);
            } else {
                result.unshift(item);
            }
        })
        return result;
    }
}